<body>
	<button onclick="addData()">插入数据</button>

	<script>
		var db;

		if (window.indexedDB) {
			// 第二参数时版本号，可选，如果该值小于系统的版本号，则会链接失败
			var request = window.indexedDB.open('customer-db', '2');

			// 监听建立链接 错误 的回调
			request.onerror = function (event) {
				console.log('%c err', 'color:red;font-size:30px', event);
			};

			// 监听建立链接 成功 的回调
			request.onsuccess = function (event) {
				console.log('%c success', 'color:teal;font-size:30px', event);
				db = event.target.result;
			};

			// 数据库有更新时触发
			request.onupgradeneeded = function (event) {
				console.log('%c upgradeneeded', 'color:orange;font-size:30px', event);
				db = event.target.result;

				// 创建一个对象仓库 我们选择 uuid 作为键路径（key path） 因为 uuid 可以保证是不重复的
				if (!db.objectStoreNames.contains('customers')) {
					var objectStore = db.createObjectStore('customers', {
						keyPath: 'uuid', // 指定主键
						// autoIncrement: true  // 主键自增
					});
					// 建立一个索引 uuid , unique 是否唯一 ：是
					objectStore.createIndex('uuid', 'uuid', { unique: true });

					// 建立一个索引 name , unique 是否唯一 ：否 ，名字可能会重复，
					objectStore.createIndex('name', 'name', { unique: false });

					// 建立一个索引 age ， unique 是否唯一 ：否 ， 年龄可能重复
					objectStore.createIndex('age', 'age', { unique: false });
				}
			};
		}

		// 插入数据
		function addData() {
			const data = {
				uuid: +new Date(),
				name: '张三',
				age: Math.floor(Math.random() * 30),
				like: '苹果',
			};
			var request = db
				.transaction(['customers'], 'readwrite') // 开启对象仓库 customers，如果是一个，可以直接写字符串 、 操作模式
				.objectStore('customers') // 要操作的对象仓库名
				.add(data); // 添加数据

			request.onerror = function () {
				console.log('数据插入失败');
			};
			request.onsuccess = function () {
				console.log('数据插入成功');
			};
		}
	</script>
</body>
